<template>
  <div id="mainportal" class="container" style="background-color: #fff;">

  <comhead title="商品详情" isLeftIcon="true" leftIconName="angle-left" @leftClick="foBack()" isRightIcon="true" rightIconName="ellipsis-h" @rightClick="updataActive()"></comhead>
   

<!--S端配置信息  -->
<div v-for="item in info.propertyList">
  <div class='updateInfo'>{{item.groupName}}</div>
  <div class='basisInfo' >
    <div v-for="(main,index) in item.list"  style="display:flex;font-size:14px; " :style=" index !=item.list.length-1 ?'border-bottom: solid 1px #e5e5e5':''">
      <div class='leftbox'>{{ main.keyName ?main.keyName :'-'}}</div>
    
    
      <div class='rightbox' style="display:flex;justify-content: space-between;align-items: center;"
      :style="main.propertyType==='IMAGE'?'text-decoration:underline;color: #1973bf;':''"
      @click="getImageDetail(main.url)" >
        <div>{{ main.keyValue ?main.keyValue :'-'}}  </div>
        <img src='../../image/back.png' v-if="main.propertyType==='IMAGE'" style='width:15px;height:15px;margin-right:10px;' />
      </div>
    </div>
  </div>
</div>



<!--B端添加的维护信息 -->

<div v-for="item in info.maintainColumnList">
  <div class='updateInfo'>{{item.columnName}}</div>
  <div class='basisInfo'>
    <div v-for="(main,index) in item.maintainList" style="display:flex;font-size:14px; " :style="index !=item.maintainList.length-1 ?'border-bottom: solid 1px #e5e5e5':''">
      <div class='leftbox'>{{ main.infoName ?main.infoName :'-'}}</div>
      <div class='rightbox' style="display:flex;justify-content: space-between;align-items: center;"
      :style="main.contentType==='IMAGE'?'text-decoration:underline;color: #1973bf;':''" @click="getImageDetail(main.contentUrl)" >
        <div>{{ main.content ?main.content :'-'}}</div>
 
        <img src='../../image/back.png' v-if="main.contentType==='IMAGE'" style='width:15px;height:15px;margin-right:10px;'/>
      </div>
    </div>
  </div>
</div>



<!--基本信息  -->

<div class='updateInfo'>
  商品信息
</div>
<div class='basisInfo' style='border-bottom: solid 1px #fff'>
  <div style='border-bottom: solid 1px #e5e5e5'  @click="getImageDetail(imgUrls.join(','))">


<mt-swipe :auto="4000" style="height:350px;" >
  <mt-swipe-item v-for="item in imgUrls">
    <img :src='item' style="height:100%;width:100%;" class="slide-image"/>
    </mt-swipe-item>
</mt-swipe>
  </div>
<!-- :style="item.title =='商品价格'&&!$store.getters.getMerchant.basicMall ?'display:none;':' display:flex;'" -->
  <div v-for="item in basisList" style="font-size:14px; border-bottom: solid 1px #e5e5e5;" :style="item.title =='商品价格'&&!$store.getters.getMerchant.basicMall&&  !info.priceShowStatus ?'display:none;':' display:flex;'">
    <div class='leftbox'>{{item.title }}</div>
    <!-- v-if="{{item.title ==='商品价格'}}" -->
    <div class='rightbox' :style="item.title ==='商品价格' ?'color:#ca0929':''" ><span v-if="item.title ==='商品价格'">￥</span>{{ info[item.valueKey] ?info[item.valueKey] :'-'}}{{info.taxStatus&&item.title ==='商品价格'&&info[item.valueKey] ?'(含税)':'' }}</div>
  </div>


   <div  style="font-size:14px; border-bottom: solid 1px #e5e5e5;display:flex;"  v-if=" $store.getters.getMerchant.showModelRela">
    <div class='leftbox'>适应车型</div>
    <div class='rightbox' style='text-decoration:underline;color: #1973bf;' @click='goPdbindCarList()' >查看全部</div>
  </div> 
   <div v-for="item in info.customAttribute" style="display:flex;font-size:14px; border-bottom: solid 1px #e5e5e5">
    <div class='leftbox'>{{item.attributeKey}}</div>
    <div class='rightbox'>{{item.attributeValue}}</div>
  </div> 

 <div v-if="info.color" style="font-size:14px; border-bottom: solid 1px #e5e5e5;display:flex;">
      <div class='leftbox'>颜色</div>
      <div class='rightbox'>
        <div style='display:flex;flex-wrap: wrap;font-size:13px;padding:5px 0; '>
          <div v-for="(item,index) in info.color.split(',')" style='display:flex;align-items: center;margin-right:10px;'>
            <div style="width:13px;height:13px;margin:5px;background-color:#fff;" :style="handleColor(item)"></div>
            <span style='color:#999'>{{item}}</span>
          </div>
        </div>
      </div>
    </div>

    <div style="font-size:14px; border-bottom: solid 1px #e5e5e5;display:flex;" v-if="info.details">
      <div class='leftbox'>详情</div>
      
      <div class='rightbox'>
        <div style='background-color:#1C9BD6;padding:3px 10px;border-radius:5px;color:#fff;' @click='changeDatilModel()'>点击查看详情</div>
      </div>
    </div>





  <!--自定义属性  -->

</div>

<div v-if="imageModel" style="height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #000;
    z-index: 2001;"  @click="imageModel = false">
<mt-swipe :auto="4000" style="width:100%;" >
  <mt-swipe-item v-for="item in lookImageList">
    <div  style="display: flex;
    align-items: center;height:100%;width:100%;">
    <img :src='item' style='width:100%;  '/>
    </div>
    </mt-swipe-item>
</mt-swipe>
</div>

<div style='height: 50px;' v-if="$store.getters.getMerchant.basicMall"></div>
<!--下单  -->
<div class='btm_box' v-if="$store.getters.getMerchant.basicMall">
  <div style='width: 55%;display: flex;align-items: center;font-size:12px; border-top: solid 1px #e5e5e5;'>

    <span style='margin:5px 0 0 5px;'>合计：<span style='color:rgb(229, 28, 35)'>￥<span style='font-size:16px'>{{productTotle}}</span> <span style="color:#999">（共{{num}}件）</span></span></span>

  </div>
   <div style='font-size:14px;background-color:rgb(246, 175, 42);  border-left: solid 1px #ddd;color:#fff;flex:1;display: flex;justify-content: center;align-items: center;'  @click="changeModel('cart')">加入购物车</div> 
  <div  @click="changeModel('shop')" style='font-size:14px;background-color:rgb(229, 28, 35);color:#fff;flex:1;display: flex;justify-content: center;align-items: center;'>立即购买</div>
</div>


<div class="bg_shop1" v-if="datilModel" style=' display: flex;z-index: 999;background-color: rgba(0, 0, 0, 0.498039);height: 100vh;width: 100%;'>

  <div style=' width:100%; display: flex;justify-content: center;align-items: center;font-size:14px;'>
    <div style='margin:10px 20px;background-color:#fff;border-radius:5px;'>
      <div style='padding:10px;border-bottom:solid 1px #e5e5e5;'>
        <span style='font-size:18px;'> 详情</span>
        <span style='color:#999;float:right;padding: 0 10px' @click='changeDatilModel()'>x</span>
      </div>
      <div>
        <img :src='info.details' style="width: 100%;"/>
      </div>
      <div style='padding:10px; display:flex;justify-content: flex-end;border-top:solid 1px #e5e5e5;'>
        <div style='border-radius: 5px;padding:5px 10px;ackground-color:#1973bf;background-color:#1973bf;color:#fff;' @click='changeDatilModel()'>
          关闭
        </div>

      </div>

    </div>
  </div>

</div>


<div :class="model ?'bg_shop1' :'bg_shop_none1'" style='z-index: 1;background-color: rgba(0, 0, 0, 0.498039);height: 100%;width: 100%;' @click='changeModel()'>
 
 <div style="position: relative;width:100%;height:100%;">

  <div style=' background-color:#fff;width:100%;' :class="model ?'modiaBoxUp2' :'modiaBoxDown2'" @click.stop='bindBody'>
    <div style='border-bottom:1px solid #e5e5e5;display:flex;margin-left:15px;justify-content: space-between'>
      <div style='padding:6px;margin-top:-35px;border-radius:5px;background-color:#fff;border:1px solid #e5e5e5;margin-bottom:20px;display:flex;'>
        <img :src='imgUrls[0]' style="width:80px;height:80px;"/>
      </div>
      <div style='font-size:13px;flex:1;'>
        <div style='margin:10px  ;height:40px;overflow: hidden;font-size:14px;'>单价:
          <span style='font-size:18px;color:rgb(229, 28, 35)'>￥{{info.memberPrice}}</span>
        </div>

      </div>
      <div style='padding:10px;'>
        <img src='../../image/tl-3@2x.png' style='width:20px;height:20px'  @click.stop='changeModel()'/>
      </div>
    </div>



    <div class='num_box'>
      <div style='display:flex;align-items:center'>购买数量：
      </div>

      <div style='display:flex;'>
        <div class="num_small_box" :class="num === 1 ?'num_small_box_dis':''" @click.stop='addnum()'>-</div>
        <div class='num_box1'>{{num}}</div>
        <div class='num_small_box' @click.stop="addnum('add')" >+</div>
      </div>
    </div>
    <div style='display:flex;align-items:center;font-size:14px; padding: 20px;'>
      <div>
        合计：
        <span style='font-size:18px;color:rgb(229, 28, 35)'>￥{{productTotle}}</span>
      </div>
    </div>
    <div style='display:flex;justify-content: center;align-items: center;width:100%;color:#fff;background-color:rgb(229, 28, 35);' @click='addCar'>
      <div style='margin:10px'>确定</div>
    </div>
  </div>




 </div>
</div>

<!-- 用组件浏览图片 -->


  </div>
</template>

 
 

<script>
import { Toast, Swipe, SwipeItem, Switch, MessageBox } from "mint-ui";
import { Indicator } from "mint-ui";
import { Tabbar, TabItem } from "mint-ui";
import { TabContainer, TabContainerItem } from "mint-ui";
import comhead from "../../common/coffee/Comhead";

export default {
  data() {
    return {
      datilModel: false,
      imageModel: false,
      productTotle: 0,
      basicMall: null,
      model: false,
      goodsId: "",
      info: [],
      num: 1,
      imgUrls: [],
      lookImageList: [],
      windowWidth: 375,
      shopModel: "",
      basisList: [
        {
          title: "商品名称",
          valueKey: "goodsName"
        },
        {
          title: "商品品牌",
          valueKey: "goodsBrand"
        },
        // {
        //   title: 'OEM号',
        //   valueKey: 'oemCode'
        // },
        {
          title: "商品编码",
          valueKey: "goodsModelNumber"
        },
        {
          title: "商品价格",
          valueKey: "memberPrice"
        }
      ],
      contentUrl: []
    };
  },
  computed: {},

  methods: {
    changeDatilModel() {
      console.log(111)
      this.datilModel = !this.datilModel;
    },
    handleColor(color) {
      switch (color) {
        case "白色":
          return "background-color:white;";
        case "黑色":
          return "background-color:black;";
        case "银色":
          return "background-color:#c0c0c0;";
        case "红色":
          return "background-color:red;";
        case "棕色":
          return "background-color:brown;";
        case "绿色":
          return "background-color:green;";
        case "蓝色":
          return "background-color:blue;";
        case "黄色":
          return "background-color:yellow;";
        case "紫色":
          return "background-color:purple;";
        default:
          return "background-color:white;";
      }
    },
    goPdbindCarList() {
      this.$router.push({
        name: "productcar",
        query: {
          goodsId: this.goodsId
        }
      });
    },
    getImageDetail(imageList) {
      if (!imageList) {
        return;
      }
      this.lookImageList = imageList.split(",");
      this.imageModel = true;
    },
    changeModel: function(e) {
      if (e) {
        this.shopModel = e;
      }
      this.model = !this.model;
    },
    bindBody() {
      return;
    },
    addnum: function(e) {
      if (e == "add") {
        this.num = this.num + 1;
      } else {
        if (this.num === 1) {
          return;
        }
        this.num = this.num - 1;
      }
      let pro = this.info.memberPrice * this.num;
      pro = pro.toFixed(2);
      this.productTotle = pro;
    },

    addCar: function(e) {
      if (!this.$store.getters.getLoginStatus.userId) {
        this.$router.push("/login");
        return;
      }

      let self = this;

      if (this.shopModel === "cart") {
        let url = this.$baseUrl.bizUrl + "/shopcart/add";
        let data = {
          token: this.$store.getters.getLoginStatus.token,
          userId: this.$store.getters.getLoginStatus.userId,
          goodsId: this.goodsId,
          skuId: this.info.sku[0].skuId,
          num: this.num
        };
        let callBack = res => {
          if (res == null) {
            console.log("网络请求错误！");
            return;
          }

          if (res.data.status != 200) {
            console.log("请求数据错误");
            return;
          }

          if (res.data.status == 200) {
            Toast({
              message: "成功"
            });

            (this.num = 1), (this.productTotle = this.info.memberPrice);
            self.changeModel(e);
          }
        };
        this.$reqFormPost(url, data, callBack);
      } else {
        console.log("购买，确定");
        self.changeModel(e);

        this.$router.push({
          name: "settle",
          query: {
            pagetype: "shop",
            goodsid: this.goodsId,
            num: this.num,
            skuid: this.info.sku[0].skuId,
            carid: this.carId
          }
        });
      }
    },
    getDatil() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/goods/front/detail";
      let data = {};

      if (!this.$store.getters.getLoginStatus.userId) {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          goodsId: this.goodsId, //商品id
          carId: this.carId
        };
      } else {
        data = {
          merchantId: this.$store.getters.getMerchant.merchantId,
          userId: this.$store.getters.getLoginStatus.userId,
          goodsId: this.goodsId, //商品id
          carId: this.carId
        };
      }

      //发起网络请求
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");
          return;
        }
        if (res.status === 200) {
          console.log("商品详情", res.data.data);
          this.num = 1;
          this.info = res.data.data;
          this.imgUrls = res.data.data.imageList.split(",");
          this.productTotle = res.data.data.memberPrice;
        }
      };
      this.$reqFormPost(url, data, callBack);
      // let res = {
      //   data: {
      //     createUserId: null,
      //     marketPrice: 110,
      //     qualityRange: "ORIGIN_TYPE",
      //     quickTag: null,
      //     storageNum: 0,
      //     goodsId: "PD5a530fe9db573c1ed8ae87b2",
      //     onlineStatus: true,
      //     collectNum: 0,
      //     remark: "0",
      //     specStatus: true,
      //     content: null,
      //     goodsBrand: "威驰",
      //     merchantName: "广州豪杰汽",
      //     goodsModelNumber: "001",
      //     customAttribute: [],
      //     maintainColumnList: [],
      //     merchantId: "SP5a051b26818d251d1448a108",
      //     skuKey: [],
      //     freightId: null,
      //     commendStatus: false,
      //     sku: [
      //       {
      //         marketPrice: 110,
      //         storageNum: 0,
      //         goodsId: "PD5a530fe9db573c1ed8ae87b2",
      //         costPrice: 0,
      //         mapkey: "",
      //         skuStatus: false,
      //         remark: null,
      //         barCode: null,
      //         labelPrice: 120,
      //         attrs: [],
      //         createTime: "2018-01-08 14:30:01",
      //         otherPrice: 0,
      //         customSkuId: null,
      //         skuId: "SKU5a530fe9db573c1ed8ae87b3",
      //         skuImgUrl:
      //           "http://116.62.22.58:8050/bapi/upload/20180108/file5a530fe6db573c1ed8ae87b1.png"
      //       }
      //     ],
      //     goodsName: "威驰AW305",
      //     limitNum: 0,
      //     updateUserId: null,
      //     memberPrice: 110,
      //     propertyList: [
      //       {
      //         groupName: "变速箱",
      //         list: [
      //           {
      //             keyName: "变速箱类型",
      //             keyValue: "手动变速箱(MT)",
      //             propertyType: "TEXT",
      //             url: null
      //           }
      //         ]
      //       },
      //       {
      //         groupName: "基础属性",
      //         list: [
      //           {
      //             keyName: "品牌",
      //             keyValue: "大众",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "前制动器类型",
      //             keyValue: "盘式",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "前轮胎规格",
      //             keyValue: "195/60 R14",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "车型名称",
      //             keyValue: "桑塔纳志俊 2010款 1.6L 手动实尚型",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "驻车制动类型",
      //             keyValue: "手刹",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "后制动器类型",
      //             keyValue: "鼓式",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "后轮胎规格",
      //             keyValue: "195/60 R14",
      //             propertyType: "TEXT",
      //             url: null
      //           },
      //           {
      //             keyName: "车系",
      //             keyValue: "桑塔纳志俊",
      //             propertyType: "TEXT",
      //             url: null
      //           }
      //         ]
      //       }
      //     ],
      //     costPrice: 0,
      //     oemCode: "",
      //     updateTime: "2018-01-08 14:30:01",
      //     catName1: "油品",
      //     saleNum: 0,
      //     logoUrl:
      //       "http://116.62.22.58:8050/bapi/upload/20180108/file5a530fe6db573c1ed8ae87b1.png",
      //     labelPrice: 120,
      //     collectType: 0,
      //     createTime: "2018-01-08 14:30:01",
      //     beginSaleTime: "2018-01-08 14:30:01",
      //     auditStatus: 1,
      //     catId1: "CAT5a011071db573c2dea9f3e28",
      //     catId2: "CAT5a0110abdb573c2dea9f3e29",
      //     imageList:
      //       "http://116.62.22.58:8050/bapi/upload/20180108/file5a530fe6db573c1ed8ae87b1.png",
      //     freightName: null
      //   },
      //   message: "success",
      //   status: 200
      // };
      // this.num = 1;
      // this.info = res.data;
      // this.imgUrls = res.data.imageList.split(",");
      // this.productTotle = res.data.memberPrice;
    },
    getReCatDatil() {
      let self = this;
      let url = this.$baseUrl.bizUrl + "/goods/front/simpledetail";
      let data = {
        token: this.$store.getters.getLoginStatus.token,
        userId: this.$store.getters.getLoginStatus.userId,
        goodsId: this.goodsId //商品id
      };

      //发起网络请求
      let callBack = res => {
        if (res == null) {
          console.log("网络请求错误！");
          return;
        }

        if (res.status != 200) {
          console.log("请求数据错误");

          return;
        }
        if (res.status === 200) {
          if (res.data.status === 404) {
            MessageBox.alert(res.data.message);
            return;
          }
          this.num = 1;
          this.info = res.data.data;
          this.imgUrls = res.data.data.imageList.split(",");
          this.productTotle = res.data.data.memberPrice;
        }
      };
      this.$reqFormPost(url, data, callBack);
    },
    goSign() {
      this.$router.push({ name: "sign" });
    },
    foBack() {
      this.$router.go(-1);
    }
  },
  mounted() {
    document.title = "商品详情";

    this.model = false;

    this.goodsId = this.$route.query.id;
    this.carId = this.$route.query.carId;
    if (this.carId) {
      this.getDatil();
    } else {
      this.getReCatDatil();
    }
  },
  components: {
    Tabbar,
    TabItem,
    TabContainer,
    TabContainerItem,
    comhead,
    Swipe,
    SwipeItem
  }
};
</script>
<style>
.num_box {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.num_small_box {
  border: solid 1px #ddd;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.num_box1 {
  background-color: #ebebe4;
  font-size: 14px;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.num_small_box_dis {
  background-color: #f8f8f8;
}

.modiaBoxDown2 {
  position: absolute;
  bottom: -100%;
  animation: myfirst0001 0.5s;
}

@keyframes myfirst0001 {
  from {
    bottom: 0;
  }

  to {
    bottom: -100%;
    display: none;
  }
}
.bg_shop_none1 {
  position: fixed;
  bottom: -100%;
  animation: myfirst0002 0.5s;
}

@keyframes myfirst0002 {
  from {
    display: flex;
  }

  to {
    display: none;
  }
}
.modiaBoxUp2 {
  position: absolute;
  bottom: 0;
  animation: myfirst000 0.5s;
  -moz-animation: myfimyfirst000rst 0.5s;
  /* Firefox */
  -webkit-animation: myfirst000 0.5s;
  /* Safari and Chrome */
  -o-animation: myfirst000 0.5s;
  /* Opera */
}

@keyframes myfirst000 {
  from {
    bottom: -100%;
  }

  to {
    bottom: 0;
  }
}

.basisInfo {
  margin: 20px 15px;
  border: 1px solid #e5e5e5;
}
.bg_shop1 {
  display: flex;
  position: fixed;
  bottom: 0;
  z-index: 999;

  background-color: rgba(0, 0, 0, 0.498039);
  height: 100%;
  width: 100%;
}
.btm_box {
  font-size: 12px;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #f8f8f8;
}

.leftbox {
  width: 7em;
  background-color: #f5f5f5;
  color: #999;
  border-right: solid 1px #e5e5e5;
  padding: 7px 5px 7px 7px;
}

.rightbox {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 2em;
  word-break: break-all;
}
.updateInfo {
  border-top: solid 1px #e5e5e5;
  border-bottom: solid 1px #e5e5e5;
  background-color: #f5f5f5;
  padding: 5px 10px;
  font-size: 14px;
  color: #333;
  
}
</style>



<!-- Add "scoped" attribute to limit CSS to this component only -->
